<script setup>
import { ref } from 'vue'

const props = defineProps({
  items: {
    type: Array,
    default: () => [
      { id: 1, title: '1' },
      { id: 2, title: '2' }
    ]
  }
})

const isPaused = ref(false)

// 计算动画延迟
const getAnimationDelay = (index) => {
  const totalItems = props.items.length
  return `calc(20s / ${totalItems} * (${totalItems} - ${index + 1}) * -1)`
}
</script>

<template>
  <div class="header">
    <div
      class="wrapper"
      @mouseenter="isPaused = true"
      @mouseleave="isPaused = false"
    >
      <div
        v-for="(item, index) in items"
        :key="index"
        class="item"
        :style="{
          '--delay': getAnimationDelay(index),
          'animation-play-state': isPaused ? 'paused' : 'running'
        }"
      >
        {{ item.title }}
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.header {
  width: 100%;
  height: 40px;
  background: #888;

  .wrapper {
    margin-inline: auto;
    position: relative;
    height: 100%;
    margin-top: 2rem;
    overflow: hidden;
    mask-image: linear-gradient(
      to right,
      rgba(0, 0, 0, 0),
      rgba(0, 0, 0, 1) 20%,
      rgba(0, 0, 0, 1) 80%,
      rgba(0, 0, 0, 0)
    );

    @keyframes scrollleft {
      to {
        left: -200px;
      }
    }

    .item {
      width: 200px;
      height: 100%;
      background-color: red;
      border-radius: 6px;
      position: absolute;
      left: max(calc(200px * 8), 100%);
      animation: scrollleft 20s linear infinite;
      animation-delay: var(--delay);
      /* 移除这里的 animation-play-state，改为在 style 中动态绑定 */
    }
  }
}
</style>
